<template>
  <div class="order">
    <van-collapse v-model="activeNames">
      <van-collapse-item :name="item._id" v-for="(item,i) in orderlist" :key="i">
        <template #title>
          <div class="title">
            <p>{{item.commercialname}}</p>
            <p>订单</p>
          </div>
        </template>
        <div class="orders">
          <div class="time">时间： {{item.createat}}</div>
          <ul>
            <li v-for="(item,j) in item.shop" :key="j">
              <div class="shops">
                <p>商品名：{{item.name}}</p>
                <p>单价：￥{{item.price}}</p>
                <p>数量：{{item.num}}</p>
              </div>
            </li>
          </ul>
          <h4>总价：￥{{item.price}}</h4>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';
Vue.use(Collapse);
Vue.use(CollapseItem);
import {getOrderAll} from "../../../store/order";
  export default {
  data() {
    return {
      activeNames: [''],
      orderlist:[],
      userid:this.$store.state.user.userid
    };
  },
  async mounted() {
    this.$store.dispatch("getOrderAll",this.userid).then(res=>{
      this.orderlist = this.$store.state.order.orderlist
      console.log(this.userid,"userid")
    })
  },
};
</script>

<style scoped>
.order{
  padding: 0.15rem;
  border-top: 2px solid red;
}
.title{
  display: flex;
  justify-content: space-between;

}
.orders{
  color: black;
}
.shops{
  border-bottom: 1px solid red;
}
.time{
  border-bottom: 1px solid green;
  margin: 0.15rem 0;
}
h4{
  margin-left:70%;
}
</style>